import { defineComponent } from "vue";
import style from "./index.module.less";
import CardView from "../CardView";
import TitleView from "../TitleView";
import { detailInfoProps } from "./types";
import TextView from "../TextView";
import RowView from "../RowView";
import ColView from "../ColView";
import icon from "./asset/icon.png";
import RoundEdgeButtonGroup from "../RoundEdgeButtonGroup";
import LabelGroup from "../LabelGroup";
import TextGroups from "../TextGroups";
import { IButtonGroupViewData } from "../ButtonGroupView/types";
import { phoneClick } from "@/command/apiTool";
import * as vant from "vant";
const { showFailToast, showSuccessToast } = vant;
export default defineComponent({
  name: "",
  props: detailInfoProps,
  setup(_) {
    const renderLeft = () => {
      return (
        <RowView class="!items-start">
          <img src={icon} class="w-[14px] h-[14px]" />
          <ColView class="ml-[5px]">
            <TextView>距你{_.distance}</TextView>
            <TextView>{_.desc}</TextView>
          </ColView>
        </RowView>
      );
    };
    const renderRight = () => {
      const data: IButtonGroupViewData[] = [
        {
          text: "导航",
          onClick: () => {
            // 后期这个经纬度地址替换成可用地址
            if (_.lat && _.lng) {
              location.href = `https://uri.amap.com/marker?position=${_.lng},${_.lat}`;
            }
            // showFailToast("功能待开发");
          },
        },
        {
          text: "电话",
          onClick: () => {
            phoneClick(_.phone);
          },
        },
      ];
      return <RoundEdgeButtonGroup data={data} />;
    };
    const renderText = () => {
      if (typeof _.text == "string") {
        return <TextView>{_.text}</TextView>;
      } else {
        return <TextGroups data={_.text} />;
      }
    };
    return () => {
      return (
        <CardView radius={0}>
          <TitleView title={_.title} labels={_.labels} />
          {renderText()}
          <LabelGroup data={_.types} />
          <RowView class="justify-between">
            {renderLeft()}
            {renderRight()}
          </RowView>
        </CardView>
      );
    };
  },
});
